<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="appTitle" />
</title>
<link rel="stylesheet" type="text/css"
	href='<c:url value="/styles/base.css" />' />
<link rel="stylesheet" type="text/css"
	href='<c:url value="/styles/charte.css" />' />
<script src='<c:url value="/js/raphael.js" />' type="text/javascript"
	charset="utf-8"></script>
<script src='<c:url value="/js/g.raphael.js" />' type="text/javascript"
	charset="utf-8"></script>
<script src='<c:url value="/js/g.pie.js" />' type="text/javascript"
	charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	window.onload = function() {
		load_graph = function(holder, title, values, labels) {
			var r = Raphael(holder);
			r.g.txtattr.font = "8px 'Fontin Sans', Fontin-Sans, sans-serif";

			r.g.text(200, 30, title).attr({
				"font-size" : 10
			});

			var pie = r.g.piechart(260, 120, 60, values, {
				legend : labels,
				legendpos : "west"
			});
			pie.hover(function() {
				this.sector.stop();
				this.sector.scale(1.1, 1.1, this.cx, this.cy);
				if (this.label) {
					this.label[0].stop();
					this.label[0].scale(1.5);
					this.label[1].attr({
						"font-weight" : 800
					});
				}
			}, function() {
				this.sector.animate({
					scale : [ 1, 1, this.cx, this.cy ]
				}, 500, "bounce");
				if (this.label) {
					this.label[0].animate({
						scale : 1
					}, 500, "bounce");
					this.label[1].attr({
						"font-weight" : 400
					});
				}
			});
		};

		load_graph("states", "Etats des fiches",
				[ <c:out value="${states.values}" escapeXml="false" /> ],
				[ <c:out value="${states.labels}" escapeXml="false" /> ]);
		<c:forEach var="report" items="${reports}">
		load_graph("diag<c:out value="${report.i}" escapeXml="false" />",
				"<c:out value="${report.title}" escapeXml="false" />",
				[ <c:out value="${report.values}" escapeXml="false" /> ],
				[ <c:out value="${report.labels}" escapeXml="false" /> ]);
		</c:forEach>
	};
</script>
</head>
<body>

	<div id="global"><jsp:include page="header.jsp" />
		<jsp:include page="menu.jsp" />
		<div id="contenu">
			<h2>
				Rapport Graphique :
				<c:out value="${survey.title}" />
			</h2>
			<div id="states"></div>
			<c:forEach var="report" items="${reports}">
				<div id="diag<c:out value="${report.i}" escapeXml="false" />"></div>
			</c:forEach>
		</div>
		<jsp:include page="footer.jsp" /></div>
</body>
</html>